<!DOCTYPE html>
<html>
<head>
    <title>图片表面水波效果</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // 获取 Canvas 元素
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        // 加载图片
        var image = new Image();
        image.src = '../img/beauty01.png';

        // 当图片加载完成后执行
        image.onload = function() {
            // 设置 Canvas 大小为图片大小
            canvas.width = image.width;
            canvas.height = image.height;

            // 绘制图片
            ctx.drawImage(image, 0, 0);

            // 获取图片数据
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;

            // 定义水波效果参数
            var amplitude = 10; // 振幅
            var wavelength = 50; // 波长
            var speed = 0.1; // 速度

            // 定义时间变量
            var time = 0;

            // 定义动画函数
            function animate() {
                // 更新时间
                time += speed;

                // 遍历每个像素
                for (var y = 0; y < canvas.height; y++) {
                    for (var x = 0; x < canvas.width; x++) {
                        // 计算当前像素的偏移量
                        var offset = (y * canvas.width + x) * 4;

                        // 计算水波效果的偏移量
                        var waveOffset = Math.sin((x + time) / wavelength) * amplitude;

                        // 计算新的像素位置
                        var newX = x + waveOffset;
                        var newY = y;

                        // 确保新的像素位置在图片范围内
                        if (newX >= 0 && newX < canvas.width && newY >= 0 && newY < canvas.height) {
                            // 获取新的像素数据
                            var newOffset = (newY * canvas.width + newX) * 4;
                            data[offset] = data[newOffset];
                            data[offset + 1] = data[newOffset + 1];
                            data[offset + 2] = data[newOffset + 2];
                            data[offset + 3] = data[newOffset + 3];
                        }
                    }
                }

                // 将更新后的像素数据绘制到 Canvas 上
                ctx.putImageData(imageData, 0, 0);

                // 请求下一帧动画
                requestAnimationFrame(animate);
            }

            // 开始动画
            animate();
        };
    </script>
</body>
</html>